<form id="frm" action="<?=fwUrl("doupload")?>" method="post" enctype="multipart/form-data" target="_self">

<input type="hidden" id="indexObj" name="indexObj" />
<input type="hidden" id="objName" name="objName" />
<input type="hidden" id="returnUrl" name="returnUrl" value="<?=curPageURL()?>" />
<?
	$arr = array("login_0.jpg","login_1.jpg");
	for($i=0; $i < count($arr); $i++ ) {
	
?>
<div class="thump">
	<div class="sub-thump shadowMe2">
		<a class="fancyMe" href="data/login_<?=$i?>.jpg"><img src="data/<?=$arr[$i]?>" width="400" /></a>
		<div class="file-detail">
			<div>
				File size: <?=filesize("data/$arr[$i]") ?> bytes <br>
				File name: <?=$arr[$i]?> <br>
				
				<? 
				$info = getimagesize("data/$arr[$i]");
				echo $info[3];
				?>
				
			</div>
		</div>		
	</div>	
	<div class="form">
		<input id="fake_<?=$i?>" name="fake_<?=$i?>" type="text" class="inputBox" placeholder="File Name" />
		<input id="btn_<?=$i?>" name="btn_<?=$i?>" type="button" class="" value="Choose File" />
		<div class="upload" onclick="do__upload('<?=$i?>','<?=$arr[$i]?>')"></div>
		<input id="file_<?=$i?>" name="file_<?=$i?>" type="file">
	</div>
</div>

<?
	}
?>

</form>

<script language="JavaScript" type="text/javascript">
	$(document).ready(function(){
		$(".fancyMe").fancybox({
			'transitionIn'	: 'none', 
			'transitionOut'	: 'none'
		});
		
		$("input[type=file]").change(function(){
			name = $(this).prop("name");			
			$("#fake_" + name.split("_")[1]).val($(this).val().split('\\').pop());
			
			console.log("#" + name.split("_")[1]);
		});
		
	});
	
	function do__upload(id, name){
		
		$("#indexObj").val(id);
		$("#objName").val(name);
		
		if($("#fake_" + id).val() == ""){
			alert("Please choose file");
			return;
		}
		
		$("#frm").submit();	
	}
	
</script>
